// src/APP.vue

<template>
<div id="class-example">
  <div :class="[firstActiveClass, firstErrorClass]">第一种{{firstActiveClass }} {{firstErrorClass}}</div>
  <div :class="[secondIsActive ? secondActiveClass : '', secondErrorClass]">第二种{{secondIsActive}} {{secondActiveClass}} {{secondErrorClass}}</div>
  <div :class="[{ active: thirdIsActive }, thirdErrorClass]">第三种 {{thirdIsActive}} {{thirdErrorClass}}</div>
</div>
</template>

<script lang="ts">
import { computed, defineComponent, reactive, ref, toRefs, watch, watchEffect } from 'vue'

export default defineComponent({
  name:"APP",
  setup() {
    const first = reactive({
      firstActiveClass: 'active',
      firstErrorClass: 'text-danger'
    })
    const second = reactive({
      secondIsActive: true,
      secondActiveClass: 'active',
      secondErrorClass: 'text-error'
    })
    const third = reactive({
      thirdIsActive: false,
      thirdErrorClass: 'text-danger-error'
    })
    return {
      ...toRefs(first),
      ...toRefs(second),
      ...toRefs(third),
    }
  }

})
</script>